<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="车道名称">
          <a-input placeholder="请输入车道名称"
                   v-decorator="['armName', {rules: [{ required: true, message: '请输入车道名称' }]
                  }]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="设备序列号">
          <a-input placeholder="请输入设备序列号"
                   v-decorator="['serialNo', {rules: [{ required: true, message: '请输入设备序列号' }]
                     }]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="ip地址">
          <a-input placeholder="请输入ip地址" v-decorator="['ipAddr', {}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="出入口状态">
          <a-select style="width: 100px"
                    @change="handleChange" v-decorator="['armStatus', {initialValue:1}]"
                    placeholder="请选择出口编号状态">
            <a-select-option :value="1">
              正常
            </a-select-option>
            <a-select-option :value="2">
              禁止
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="道路类型">
          <a-select style="width: 100px"
                    @change="handleChange" v-decorator="['armType', {initialValue:0}]"
                    placeholder="请选择出口类型">
            <a-select-option :value="0">
              进口
            </a-select-option>
            <a-select-option :value="1">
              出口
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-show="false"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="停车场名称">
          <a-input placeholder="请输入停车场名称" v-decorator="['parkName', {}]"/>
        </a-form-item>
        <!--            <a-row>
                      <a-col :span="24" :style="{ textAlign: 'right' }">
                        <a-button type="primary" @click="fhandleOk"  html-type="submit">确定</a-button>
                      </a-col>
                    </a-row>-->

        <a-form-item
          v-show="false"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="停车场出口编号">
          <a-input placeholder="停车场出口编号" v-decorator="['armCode', {}]"/>
          <!-- <a-input-number v-decorator="[ 'armCode', {}]" /> -->
        </a-form-item>
        <a-form-item
          v-show="false"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="停车场编码">
          <a-input placeholder="请输入停车场编码" v-decorator="['parkCode', {}]"/>
        </a-form-item>
        <a-form-item
          v-show="false"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="视频流url地址">
          <a-input placeholder="请输入视频流url地址" v-decorator="['videoUrl', {}]"/>
        </a-form-item>
        <a-form-item
          v-show="false"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="出入口二维码url地址">
          <a-input placeholder="请输入出入口二维码url地址" v-decorator="['armQrcodeUr', {}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="更新日期"
          v-show="false">
          <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'updateTime', {}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="创建人" v-show="false">
          <a-input placeholder="请输入创建人" v-decorator="['createUser', {}]"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {deleteAction, downFile, getAction, httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"
import {JeecgListMixin} from "@/mixins/JeecgListMixin";
import {filterObj} from "@/utils/util";
export default {
  name: "ParkArmInfoModal",
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 10},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 10},
        sm: {span: 5},
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: [],

      columns: [
      ],
      ipagination: {
        current: 1,
        pageSize: 10,
        // pageSizeOptions: ['10', '20', '30'],
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },

      url: {
        list: "/parking/parkArmInfo/list",
        delete: "/parking/parkArmInfo/delete",
        add: "/parking/parkArmInfo/add",
        edit: "/parking/parkArmInfo/edit",
        importExcelUrl: "parking/parkArmInfo/importExcel",
        QRcode: "/jddhlw/parkingQR/parkInfoQRcode",
      },
      queryParam: {
        "opTime_begin": "",
        "opTime_end": "",
        "type": "-1",
      },
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      computed: {
        importExcelUrl: function () {
          return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        }
      },
    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      this.form.resetFields();
      this.visible = true;
      this.model.id = record.id
      this.loadData()
      this.$nextTick(() => {//radio不显示选择
        //时间格式化
        this.form.setFieldsValue({updateTime: this.model.updateTime ? moment(this.model.updateTime) : null})
        if (JSON.stringify(record) != '{}') {
          console.log(record)
          if(record.armStatus==='禁止')
          {
            console.log(record.armStatus)
            this.form.setFieldsValue({armStatus: 2});
          }
          if(record.armStatus==='正常')
          {
            console.log(record.armStatus)
            this.form.setFieldsValue({armStatus: 1});
          }
          if(record.armType==='进口')
          {
            console.log(record.armType)
            this.form.setFieldsValue({armType: 0});
          }
          if(record.armType==='出口')
          {
            console.log(record.armType)
            this.form.setFieldsValue({armType: 1});
          }

          this.form.setFieldsValue({ armName:record.armName})
          this.form.setFieldsValue({ serialNo:record.serialNo})
          this.form.setFieldsValue({ ipAddr:record.ipAddr})
        }
      });
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleDelete: function (invateuserdetailId) {
      if (!this.url.delete) {
        this.$message.error("请设置url.delete属性!")
        return
      }
      var that = this;
      deleteAction(that.url.delete, {invateuserdetailId: invateuserdetailId}).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loadData();
        } else {
          that.$message.warning(res.message);
        }
      });
    },

    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          let formData = Object.assign(this.model, values);
          //时间格式化
          formData.updateTime = formData.updateTime ? formData.updateTime.format('YYYY-MM-DD HH:mm:ss') : null;

          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      })
    },
    getQueryField: function () {
      //TODO 字段权限控制
      var str = "id";
      this.columns.forEach(function (value) {
        if (!!value.dataIndex) {
          str += "," + value.dataIndex;
        }
      });
      return str;
    },
    getQueryParams() {

      var param = Object.assign({}, this.isorter, this.queryParam);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      if (this.queryParam.opTime_begin != "" && this.queryParam.opTime_end != "") {
        param.opTime_begin = this.queryParam.opTime_begin + " 00:00:00";
        param.opTime_end = this.queryParam.opTime_end + " 23:59:59";
      }
      // delete param.createTimeRange; // 时间参数不传递后台
      return filterObj(param);
    },
    loadData(arg) {
      //判断当前页面，是否设置url属性
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams();//查询条件
      // （params是前端往后端传递的数据，它调用了一个 getQueryParams方法  去获取查询条件）
      this.loading = true;
      //axios一样的用法、this.url.list 是访问后端的路径  也就是Controller 里方法对应的路径
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
          console.log(this.dataSource)
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
    // 实时更新表格中各个输入框的状态
    handleChange() {
    },
    handleCancel() {
      this.close()
    },
  }
}
</script>

<style lang="less" scoped>

</style>
